<script setup>
import TopBar from './components/ToBar.vue'
import SideBar from './components/SideBar.vue'
import Category from "@/views/MallManagement/Category.vue";
</script>


<template>
  <div class="app-container">
    <el-container style="height: 100vh">
      <!-- 左侧边栏 -->
      <SideBar />

      <!-- 右侧主内容区 -->
      <el-container>
        <!-- 顶部导航栏 -->
        <el-header class="header">
          <TopBar />
        </el-header>

        <!-- 路由内容区 -->
        <el-main class="main-content">
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<style scoped>
.app-container {
  height: 100vh;
}

.header {
  height: auto;
  padding: 0;
  background-color: #fff;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
}

.main-content {
  padding: 20px;
  background-color: #f0f2f5;
  min-height: calc(100vh - 64px);
}

</style>
